<template>
	<view>
		<view class="box"></view>
		<uni-list :border="false">
			<uni-list-chat v-for="item in list" :key="item.id" :avatar-circle="true" avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
				<template #default>
					<view class="notice-item">
						<view class="notice-header">
							<view class="notice-title">练习任务名称</view>
							<view class="notice-time">2024/7/19 12:00</view>
						</view>
						<view class="notice-content">
							只显示单行只显只显示单行只显示只显示单行只显示只显示单行只显示只显示单行只显示示...
						</view>
					</view>
				</template>
			</uni-list-chat>
		</uni-list>
		<!-- <uni-load-more :status="loadMoreStatus" ></uni-load-more> -->
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { useList } from '@/hooks/UseList'
	const list = ref([
		{ value: 0, label: "最新" },
		{ value: 1, label: "热门" }
	])
  // const { list, total, loadMoreStatus } = useList()
	
</script>

<style lang="scss" scoped>
	.box {
		height: 10px;
		background: #F5F5F5;
	}
	.notice-item {
		flex: 1;
		width: 100%;
		white-space: nowrap;
		font-family: PingFang SC;
		font-weight: 500;
		.notice-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 7px;
			.notice-title {
				flex: 1;
				font-size: 16px;
				color: #333333;
			}
			.notice-time {
				font-size: 12px;
				color: #999999;
			}
		}
		.notice-content {
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: 12px;
			color: #999999;
		}
	}
	::v-deep {
		.uni-list {
			&::after {
				display: none;
			}
			.uni-list--border {
				display: none;
			}
			.uni-list-chat__container {
				padding: 10px;
			}
			.uni-list-chat__content {
				padding-left: 10px;
				border-bottom: 1px solid #E0E0E0;
				padding-bottom: 13px;
			}
			.uni-list-chat__content-main {
				display: none;
			}
			.uni-list-chat__content-extra {
				flex: 1;
				flex-direction: row;
				width: 100%;
				margin: 0;
			}
		}
	}
</style>
